<template>
	<view>
		<uni-popup :animation="animation" type="center" ref="delete">
			<view class="pop_wrap">
					<view class="pop_top">
						<view class="pop_top_title">提示</view>
						<view class="pop_top_content">您确定要删除吗?</view>
					</view>
					<view class="pop_bottom">
						<view class="pop_bottom_cancel" @tap="cancel">取消</view>
						<!-- 					<view class="name-choose"></view> -->
											<view class="pop_bottom_comfirm" @tap="comfirm">确认</view>
					</view>

			</view>
		</uni-popup>
		  <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="lower"
		              >
					  			<view class="zhanwei_top"></view>
				<div  class="item_wrap" v-for="(each,index) in list" :key='index' >
					<navigator :url="'../../pagesA/product/product?id='+each.pid" class="item_left" ><image :src="imgRequestUrl+'/upload/pro/'+each.img" mode=" aspectFit" lazy-load></image></navigator>
					<view class="item_right">
						<navigator :url="'../../pagesA/product/product?id='+each.pid" class="item_right_title">{{each.name}}</navigator>
						<navigator :url="'../../pagesA/product/product?id='+each.pid" class="item_right_collect_count">{{each.count}}人收藏</navigator>
						<view class="item_right_btn" v-model="iconText"  :class="{'btn_oneActive':each.kaiguan}" :data-index="index" :data-id = 'each.id' @click="choose" >{{each.kaiguan===false?icons.weixuanze:icons.yixuanze}}</view>
						<navigator :url="'../../pagesA/product/product?id='+each.pid" class="item_right_money">¥{{each.money}}</navigator> 
					</view>
					<view class="item_right_btn" v-model="iconText"  :class="{'btn_oneActive':each.kaiguan}" :data-index="index" :data-id = 'each.id' @click="choose" >{{each.kaiguan===false?icons.weixuanze:icons.yixuanze}}</view>
					
				</div>
			<!-- 	<view v-else class="item_wrap" v-for="(each,index) in searchList" :key='index'>
					<view class="item_left" ><image :src="imgRequestUrl+'/upload/pro/'+each.img" mode="scaleToFill" lazy-load></image></view>
					<view class="item_right">
						<view class="item_right_title">{{each.name}}</view>
						<view class="item_right_collect_count">{{each.count}}人收藏</view>
						<view class="item_right_btn" v-model="iconText"  :class="{'btn_oneActive':each.kaiguan}" :data-index="index" :data-id = 'each.id' @click="choose" >{{each.kaiguan===false?icons.weixuanze:icons.yixuanze}}</view>
						<view class="item_right_money">{{each.money}}</view> 
					</view>
				</view> -->
<!-- 				<view class="loadding_content">仪到底</view> -->
			<uni-load-more :status="zhuangtai[state]"></uni-load-more>

			<view class="zhanwei_bottom"></view>
		 </scroll-view>
		 
		 
		 <view class="top_bar">
				 <input type="text" placeholder="商品名称" class="top_bar_input" @input="huifu" v-model="value" />
				 <view class="search" @click="search">{{souname}}</view>
		 </view>
		 <view class="bottom_bar">
			 <view class="btn_all" :class="[{'btn_active':all_check}]" @click="allCheck">{{all_check===true?yixuanze:weixuanze}}</view>
			 <view class="check_all" >全选</view>		
			 <view class="delete_product"><view class="delete_product_btn" @click="deleteProduct">删除产品</view></view>
		 </view>
	</view>    
</template> 
  
<script>
import uniLoadMore from "../../components/uni-load-more/uni-load-more.vue"
	export default {
		components: {
			uniLoadMore
		}, 
		onLoad() {
			// console.log(this)
			this.icons=uni.getStorageSync('icons');
			this.weixuanze = this.icons['weixuanze'];
			this.yixuanze = this.icons['yixuanze']
			this.url = uni.getStorageSync('APP_key');
			this.imgRequestUrl = uni.getStorageSync('CND_key')
			// this.imgUrl = this.imgRequestUrl+'/upload/pro/';
			// console.log(typeof(this.deleteList))
				this.user=uni.getStorageSync('user');
				this.user_key=uni.getStorageSync('user_key');
				 this.yhpz=uni.getStorageSync('yhpz');
				this.getColletion();
		},
		data() {	
			return {
				animation:true,
				scrollTop: 0,
				zhuangtai:['more','loading','wu'],
				// loaddingContent:['下拉加载更多','加载中...','已到底,没有更多了'],
				icons:'',
				weixuanze:'',
				yixuanze:'',
				url:'',
				user:'',
				user_key:'',
				yhpz:'',
				ye:0,
				number:15, 
				imgUrl:[],
				imgRequestUrl:'',
				copyList:[],
				list:[],
				//默认0下拉刷新 1正在加载 2无更多内容
				state:0,
				// yixuanze weixuanze
				iconText:[],
				all_check:false,
				incheck:[],
				deleteIndex:[],
				value:'',
				searching:false,
				copyye:null,
				copystate:null,
				souname:'搜索'
				// deleteList:[],
			}
		},
		computed:{
			// changeLogo:function(e){
			// console.log(e)
			// return this.yixuanze
			// }
		},
		// filters:{
		// 	changeLogo(val,index){
		// 		console.log(val+'|'+index)
		// 	}
		// },
		methods: {
			huifu(){ 
				 this.souname='搜索';
				var _this = this;
				this.searching = true;
				if(this.searching){
					this.ye = 0;
					this.state = 0;
				uni.request({
					url:this.url+'/favorites_data.php',
					header:{
					'content-type': 'application/x-www-form-urlencoded', 
					}, 
					method:'POST', 
					data:{
						user:this.user, 
						user_key:this.user_key,
						yhpz:this.yhpz,
						type:'all', 
						ye:this.ye,
						number:this.number,
					}, 
						success:function(res){
								var imageUrl;
								imageUrl = _this.imgRequestUrl+'/upload/pro/';
								res.data.forEach((ele,i)=>{
									ele['kaiguan'] = false
									_this.list.push(ele);
									// console.log(_this.list)
									_this.imgUrl.push(imageUrl+ele.img) 
								})
								_this.list = res.data
								// _this.searching = false
							//判断返回来的数据长度是否小于number值
							if(res.data.length<_this.number){
								_this.state = 2;
							}
							else{
													  _this.state =1;
							}
								},
								fail:function(err) {
									console.log(err)
								}
				})
					
				}
				else{
					return
				}
			},
			// 搜索 
			search(){ 
				if(this.value===''){
					uni.showToast({
					    title: '请输入内容',
					    duration: 2000,
						icon:'none'
					});
					return
				}
				if(this.souname==='取消'){
					this.value='';
					this.souname='搜索';
				}else{
					this.souname='取消';
					this.searching=true
				}
				
				var _this = this
				this.searching=true;
					// 点击搜索清空 list
				this.list = [];
				this.ye = 0;
				uni.request({
					url:this.url+'/favorites_data.php',
					header:{
					'content-type': 'application/x-www-form-urlencoded', 
					},
					method:'POST', 
					data:{
						user:this.user, 
						user_key:this.user_key,
						yhpz:this.yhpz,
						type:'sou', 
						ye:this.ye,
						number:this.number,
						sou:this.value
					}, 
						success:function(res){
								var imageUrl;
								imageUrl = _this.imgRequestUrl+'/upload/pro/';
								res.data.forEach((ele,i)=>{
									ele['kaiguan'] = false
									_this.list.push(ele);
									// console.log(_this.list)
									_this.imgUrl.push(imageUrl+ele.img) 
								})
								_this.list = res.data
								_this.searching = false
							//判断返回来的数据长度是否小于number值
							if(res.data.length<_this.number){
								_this.state = 2;
							}
							else{
													  _this.state =1;
							}
								},
								fail:function(err) {
									console.log(err)
								}
				})
			},
			cancel(){
				this.$refs.delete.close();
				console.log(this.list)
			},
			comfirm(){
				var _this = this;
				var deleteidList = [];
				this.list.forEach((ele,i)=>{
					if(ele.kaiguan==true){
						deleteidList.push(ele.id);
					}
				});
				console.log(deleteidList);
				
				uni.request({
							url:_this.url+'/favorites_data.php',
							header:{
							'content-type': 'application/x-www-form-urlencoded', 
							},
							method:'POST', 
							data:{
								user:_this.user, 
								user_key:_this.user_key,
								yhpz:_this.yhpz,
								type:'del', 
								sou:deleteidList.join(',')
							}, 
							success:(res)=>{ 
								console.log(res)
								var arr=[];
									this.list.forEach((ele,i)=>{
										if(ele.kaiguan!=true){
											arr.push(ele);
										}
								});
								this.list=arr;
							},
							fail:function(err){
								console.log(err)
							}
				})
				this.$refs.delete.close();
			},
			
			// shanchu 
			deleteProduct(){
				this.$refs.delete.open();
			},
			allCheck(){ 
				this.incheck=[];
				this.all_check=!this.all_check;
				if(this.all_check==true){
					this.list.forEach(function(ele,i){
						ele['kaiguan']=true
					});
					this.incheck=this.incheck.concat(this.list);
						
				}
				else{
					this.list.forEach(function(ele,i){
						ele['kaiguan']=false
					})
					return
				}
				
			},
			// 点击单个选择
			choose(e){
				var _this = this;
				var ifPush = true
				// console.log(this.incheck)
				let id = e.currentTarget.dataset.id;
				let index = e.currentTarget.dataset.index;
					this.list[index].kaiguan = !this.list[index].kaiguan;
				//	如果重复点击的话就不push 而是删除掉
					this.incheck.forEach(function(ele,i,arr){   
						if(ele.id==id){
							arr.splice(i,1);
							_this.all_check=false;
							ifPush = false
						}
					})

					},

			// 触底更新
			        lower: function() {
						// 通过searching判断是否收藏的刷新 收藏下拉刷新
						if(this.searching){
							// 判断list里面的长度是否与incheck里面的长度相同
							if(this.list.length!=this.incheck.length){
								this.all_check=false
							}
							var _this = this
							// 判断此时额state是否为2或者是否为2 此时的状态不放请求
							if(this.state==2){
								return
							}
							this.state=1
							this.ye+=1;
							setTimeout(function(){ 
								uni.request({
									url:_this.url+'/favorites_data.php',
									header:{
									'content-type': 'application/x-www-form-urlencoded', 
									},
									method:'POST',
									data:{
										user:_this.user,
										user_key:_this.user_key,
										yhpz:_this.yhpz,
										type:'sou',
										ye:_this.ye,
										number:_this.number
									},
								success:function(res){
									var imageUrl;
									imageUrl = _this.imgRequestUrl+'/upload/pro/';
									res.data.forEach((ele,i)=>{
										ele['kaiguan'] = false
										_this.list.push(ele);
										_this.imgUrl.push(imageUrl+ele.img) 

									})
								//判断返回来的数据长度是否小于number值
								if(res.data.length<_this.number){
									_this.state = 2;
								}
								else{
														  _this.state =1;
								}
									},
									fail:function(err) {
										console.log(err)
									}
								})
							},200)
							
						}
						// all在下拉刷新
						else{
						// 判断list里面的长度是否与incheck里面的长度相同
						if(this.list.length!=this.incheck.length){
							this.all_check=false
						}
						var _this = this
						// 判断此时额state是否为2或者是否为2 此时的状态不放请求
						if(this.state==2){
							return
						}
						this.state=1
						this.ye+=1;
						setTimeout(function(){ 
							uni.request({
								url:_this.url+'/favorites_data.php',
								header:{
								'content-type': 'application/x-www-form-urlencoded', 
								},
								method:'POST',
								data:{
									user:_this.user,
									user_key:_this.user_key,
									yhpz:_this.yhpz,
									type:'all',
									ye:_this.ye,
									number:_this.number
								},
							success:function(res){
								var imageUrl;
								imageUrl = _this.imgRequestUrl+'/upload/pro/';
								res.data.forEach((ele,i)=>{
									ele['kaiguan'] = false
									_this.list.push(ele);
									// console.log(_this.list)
									_this.imgUrl.push(imageUrl+ele.img) 
									_this.iconText.push('weixuanze');
									// console.log(_this.iconText)
												// _this.onecheck.push(
												// 	ifOneCheck :false,
												// );
									// console.log(_this.onecheck)
								})
									// _this.list = res.data;

								// 	res.data.forEach((ele,i)=>{
								
								// 	})
									// console.log(_this.imgUrl)
							//判断返回来的数据长度是否小于number值
							if(res.data.length<_this.number){
								_this.state = 2;
							}
							else{
													  _this.state =1;
							}
								},
								fail:function(err) {
									console.log(err)
								}
							})
						},200)
						
						}

			        },
			// 获取所有收藏
			getColletion(){
				var _this = this
				uni.request({
					url:this.url+'/favorites_data.php',
					header:{
					'content-type': 'application/x-www-form-urlencoded', 
					},
					method:'POST',
					data:{
						user:this.user,
						user_key:this.user_key,   
						yhpz:this.yhpz,
						type:'all',
						ye:this.ye,
						number:this.number
					},
					success:function(res){
						console.log(res.data)
						var imageUrl;
						imageUrl = _this.imgRequestUrl+'/upload/pro/';
						res.data.forEach((ele,i)=>{
							ele['kaiguan'] = false
							_this.list.push(ele);
							// console.log(_this.list)
							_this.imgUrl.push(imageUrl+ele.img) 
							_this.iconText.push('weixuanze');
							// console.log(_this.iconText)
										// _this.onecheck.push(
										// 	ifOneCheck :false,
										// );
							// console.log(_this.onecheck)
						})
						if(res.data.length<_this.number){
							_this.state=2
						}
						// _this.list = res.data;
						
						// res.data.forEach((ele,i)=>{
							
						// })
						// console.log(_this.imgUrl)

					},
					fail:function(err) {
						console.log(err)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
scroll-view{
		height: 100vh;
		}
.loadding_content{
			text-align: center;
		}
.item_wrap{
display: flex;
position: relative;
height: 185upx;
padding: 20upx 0 15upx 0;
margin: 12upx auto;
background-color: #fff;
width: 92%;
border-radius: 10upx;


	
	.item_left{
		display: inline-block;
		width: 40%;
		height: 100%;
		text-align: center;
		image{
			border-radius: 12upx ;
			width: 100%;
			max-width: 230upx;
			height: 100%;
		}
	}
	.item_right{
		display: inline-block;
		position: relative;
		width: 60%; 
		height: 100%;
		font-size: $color-size-2;
		margin-left: 13upx;
		.item_right_title{
			position: absolute;
			top: -4upx;
			left: 0;
			color: $color-black-0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space:nowrap;
			width: 90%;
		}
		.item_right_collect_count{
			position: absolute;
			top: 33upx;
			left: 0;
			color:$uni-text-color-grey;
			font-weight: 500;
		}
		.item_right_btn{
			font-family: iconfont;
			position: absolute;
			bottom: 0rpx;
			right: 11rpx;
			width: 45rpx;
			height: 150rpx;
			text-align: center;
			line-height: 150rpx;
			top: 0rpx;
			margin: auto 0;
			font-size: $color-size-6;
			color:$border-color-dark
		}

		.item_right_money{
			position: absolute;
			font-size: $color-size-6;
	bottom: 0upx;
	right: 55upx;
	color: $color-red-2;
		}
	}
	
}
.btn_active{
			color:$color-all !important;
}
.zhanwei_top{
	height: 100upx;
	width: 100%;
	margin-bottom: 10upx;
}
.zhanwei_bottom{
	height: 100upx;
	width: 100%;
	margin-top: 10upx;
}
.top_bar{
	position: fixed;
	height: 100upx;
	background-color: $bgcolor-black-8;
	top: 0;
	width: 100%;
	display: flex;
	padding: 35upx 30upx;
	align-items: center;
	box-sizing: border-box;
	font-size: $color-size-3;
	.top_bar_input{
		background-color: $bgcolor-white-0;
		border-radius: 35upx;
		flex-grow: 1;
		padding-left: 28upx;
		outline: none;
		height: 65upx;
		line-height: 65upx;
	}
	.search{
		font-size: $color-size-2;
		padding-left: 10upx;
		color: $color-black-0;
		font-weight: 500;
	}
}
// 单个选择 
.btn_oneActive{
	font-family:iconfont;
	color: $color-all !important;
	}
.bottom_bar{
	display: none;
	position: fixed;
	height: 100upx;
	border-top: 1px solid $border-color-dark;
	bottom: 0;
	width: 100%;
	display: flex;
	align-items: center;
	font-size: $color-size-2;
	background-color: $bgcolor-white-0;
	.btn_all{
		width: 15%;
		text-align: center;
		font-family:iconfont;
		font-size: $color-size-5;
		color: $border-color-dark;
	}
	.check_all{
		width: 60%;
	}
	.delete_product{
		width: 25%;
		text-align: center;
		.delete_product_btn{
			display: inline-block;
			padding: 10rpx 18rpx;
			border-radius: 35rpx;
			background-color: $bgcolor-red-1;
			color: $color-white-0;
			font-size: $color-size-2;
		}
	}
}
// 弹出层
			.pop_wrap {
				width: 550upx;
				height: 260upx;
				background-color: $bgcolor-white-0;
				border-radius: 10upx;
				display: flex;
				flex-direction: column;
				align-items: center;
				.pop_top{
					height: 70%;
					width: 100%;
					text-align: center;
					.pop_top_title{
						padding-top: 25upx;
						font-size: $color-size-4;
					}
					.pop_top_content{
						padding-top: 35upx;
						font-size: $color-size-2;
						color: $color-black-4;
					}
				}
				.pop_bottom{
					border-top: 1px solid $border-color-base;
					display: flex;
					align-items: center;
					text-align: center;
					width: 100%;
					flex: 1;
					.pop_bottom_cancel{
						width: 50%;
						border-right: 1px solid $border-color-base;
					}
					.pop_bottom_comfirm{
						flex: 1;
						color: $color-blue-2;
					}
				}
			}
</style>
